<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

    <div class="lesson-page-wrapper">
        <!-- reuse this lesson-page-wrapper block for each 'page' of content in your lesson -->
        <!-- include content here. Content will be presented via asciidocs files,
        which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
        <div class="adoc-content" th:replace="doc:BypassRestrictions_Intro.adoc"></div>
    </div>

    <div class="lesson-page-wrapper">
        <!-- stripped down without extra comments -->
        <div class="adoc-content" th:replace="doc:BypassRestrictions_FieldRestrictions.adoc"></div>
        <div class="attack-container">
            <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
            <form class="attack-form" accept-charset="UNKNOWN" name="fieldRestrictions"
                  method="POST"
                  action="/WebGoat/BypassRestrictions/FieldRestrictions">

                <div>Select field with two possible values</div>
                <select name="select">
                   <option value="option1">Option 1</option>
                   <option value="option2">Option 2</option>
                </select>
                <div>Radio button with two possible values</div>
                <input type="radio" name="radio" value="option1" checked="checked"/> Option 1<br />
                <input type="radio" name="radio" value="option2" /> Option 2<br />
                <div>Checkbox: value either on or off</div>
                <input type="checkbox" name="checkbox" checked="checked"/> Checkbox
                <div>Input restricted to max 5 characters</div>
                <input type="text" value="12345" name="shortInput" maxlength="5"/>
                <div>Disabled input field</div>
                <input type="submit" value="submit"/>

            </form>
            <div class="attack-feedback"></div>
            <div class="attack-output"></div>
        </div>
    </div>

    <div class="lesson-page-wrapper">
        <div class="adoc-content" th:replace="doc:BypassRestrictions_FrontendValidation.adoc"></div>
        <div class="attack-container">
            <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>

            <form class="attack-form" accept-charset="UNKNOWN" name="frontendValidation"
                  id="frontendValidation"
                  method="POST"
                  action="/WebGoat/BypassRestrictions/frontendValidation/"
                  onsubmit="return validate()">
                <div>
                    <strong>Field 1:</strong> exactly three lowercase characters(^[a-z]{3}$)
                </div>
                <div>
                  <textarea cols="25" name="field1" rows="1">abc</textarea>
                </div>
                <p></p>
                <div><strong>Field 2:</strong> exactly three digits(^[0-9]{3}$)</div>
                <div>
                  <textarea cols="25" name="field2" rows="1">123</textarea>
                </div>
                <p></p>
                <div><strong>Field 3:</strong> letters, numbers, and space only(^[a-zA-Z0-9 ]*$)</div>
                <div>
                  <textarea cols="25" name="field3" rows="1">abc 123 ABC</textarea>
                </div>
                <p></p>
                <div><strong>Field 4:</strong> enumeration of numbers (^(one|two|three|four|five|six|seven|eight|nine)$)</div>
                <div>
                  <textarea cols="25" name="field4" rows="1">seven</textarea>
                </div>
                <p></p>
                <div><strong>Field 5:</strong> simple zip code (^\d{5}$)</div>
                <div>
                  <textarea cols="25" name="field5" rows="1">01101</textarea>
                </div>
                <p></p>
                <div><strong>Field 6:</strong> zip with optional dash four (^\d{5}(-\d{4})?$)</div>
                <div>
                  <textarea cols="25" name="field6" rows="1">90210-1111</textarea>
                </div>
                <p></p>
                <div><strong>Field 7:</strong> US phone number with or without dashes (^[2-9]\d{2}-?\d{3}-?\d{4}$)</div>
                <div>
                  <textarea cols="25" name="field7" rows="1">301-604-4882</textarea>
                </div>
                <input type="hidden" value="" name="error" />
                <p><button type="submit" class="btn btn-primary">Submit</button></p>
            </form>

            <script>
            var regex1=/^[a-z]{3}$/;
            var regex2=/^[0-9]{3}$/;
            var regex3=/^[a-zA-Z0-9 ]*$/;
            var regex4=/^(one|two|three|four|five|six|seven|eight|nine)$/;
            var regex5=/^\d{5}$/;
            var regex6=/^\d{5}(-\d{4})?$/;
            var regex7=/^[2-9]\d{2}-?\d{3}-?\d{4}$/;
            var validate = function() {
              var msg='JavaScript found form errors';
              var err=0;
              if (!regex1.test(document.frontendValidation.field1.value)) {err+=1; msg+='\n  Value entered for field 1 is not correct';}
              if (!regex2.test(document.frontendValidation.field2.value)) {err+=1; msg+='\n  Value entered for field 2 is not correct';}
              if (!regex3.test(document.frontendValidation.field3.value)) {err+=1; msg+='\n  Value entered for field 3 is not correct';}
              if (!regex4.test(document.frontendValidation.field4.value)) {err+=1; msg+='\n  Value entered for field 4 is not correct';}
              if (!regex5.test(document.frontendValidation.field5.value)) {err+=1; msg+='\n  Value entered for field 5 is not correct';}
              if (!regex6.test(document.frontendValidation.field6.value)) {err+=1; msg+='\n  Value entered for field 6 is not correct';}
              if (!regex7.test(document.frontendValidation.field7.value)) {err+=1; msg+='\n  Value entered for field 7 is not correct';}
              document.frontendValidation.error.value = err
              if ( err > 0 ) {
                alert(msg)
                return false;
              }
              return true;
            }
            </script>
            <br/>
            <br/>
            <div class="attack-feedback"></div>
            <div class="attack-output"></div>
        </div>
    </div>
</html>
